import { ref, markRaw } from 'vue';
import { openPage } from '@u/window/index';
import { getSelectLabel } from '@/utils/filterData/index';
import { Select, OptionsItem } from '@com/Select/index';
import type { FormItem } from '@com/Form/index';
import type { TableConfigItem } from '@com/Table/index';

const options = [
  {
    value: '1',
    label: '百度百科',
  },
  {
    value: '2',
    label: '网购商城',
  },
  {
    value: '3',
    label: '游戏',
  },
];

const userList = [
  { value: '1', label: '张三' },
  { value: '2', label: '李四' },
  { value: '3', label: '王五' },
  { value: '4', label: '赵六' },
  { value: '5', label: '田七' },
  { value: '6', label: '重八' },
];

const stateList = [
  { value: '1', label: '已完成' },
  { value: '0', label: '未完成' },
];

const firstList = [
  { value: '01', label: '湖北' },
  { value: '02', label: '湖南' },
];

const secondListAll = [
  { value: '0101', label: '武汉市', pid: '01' },
  { value: '0102', label: '咸宁市', pid: '01' },
  { value: '0103', label: '十堰市', pid: '01' },
  { value: '0104', label: '宜昌市', pid: '01' },
  { value: '0201', label: '长沙市', pid: '02' },
  { value: '0202', label: '岳阳市', pid: '02' },
  { value: '0203', label: '益阳市', pid: '02' },
];
const secondList = ref<OptionsItem[]>([]);
secondList.value = secondListAll;

const searchSecondList = ref<OptionsItem[]>([]);
searchSecondList.value = secondListAll;

export const tableConifg = ref<TableConfigItem[]>([
  {
    label: '项目名称',
    prop: 'projectName',
    width: 200,
  },
  {
    label: '项目类型',
    prop: 'projectTypeName',
    width: 130,
  },
  {
    label: '项目地址',
    prop: 'address',
    width: 240,
    render: (data) => {
      return <div onClick={() => openPage(data.address)}>{data.address}</div>;
    },
  },
  {
    label: '使用人员',
    prop: 'userArr',
    width: 200,
    render: (data) => getSelectLabel(data.userArr, userList),
  },
  {
    label: '上传日期',
    prop: 'uploadTime',
    width: 150,
  },
  {
    label: '生效时间',
    prop: 'uploadTimeArr',
    width: 250,
    render: (data) =>
      data?.uploadTimeArr && data.uploadTimeArr.length
        ? `${data.uploadTimeArr[0]} 至 ${data.uploadTimeArr[1]}`
        : '',
  },
  {
    label: '状态',
    prop: 'state',
    width: 120,
    render: (data) => getSelectLabel(data.state, stateList),
  },
  {
    label: '一级部门',
    prop: 'firstDep',
    width: 120,
    render: (data) => getSelectLabel(data.firstDep, firstList),
  },
  {
    label: '二级部门',
    prop: 'secondDep',
    width: 120,
    render: (data) => getSelectLabel(data.secondDep, secondListAll),
  },
  {
    label: '备注',
    prop: 'mark',
    width: 200,
  },
  {
    label: '附件',
    prop: 'files',
    width: 350,
    render: () => {
      return '附件';
      // return <FileOperate files={data.files}></FileOperate>;
    },
  },
]);

export const searchFormConifg = ref<FormItem[]>([
  {
    label: '项目名称',
    prop: 'projectName',
    component: 'el-input',
  },
  {
    label: '项目类型',
    prop: 'projectType',
    component: markRaw(Select),
    attrs: {
      options: options,
    },
  },
  {
    label: '状态',
    prop: 'state',
    component: markRaw(Select),
    attrs: {
      options: stateList,
    },
  },
  {
    label: '上传日期',
    prop: 'uploadTime',
    component: 'el-date-picker',
    attrs: {
      placeholder: '请选择日期',
      type: 'date',
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
    },
  },
  {
    label: '生效时间',
    prop: 'uploadTimeArr',
    component: 'el-date-picker',
    attrs: {
      placeholder: '请选择日期',
      type: 'daterange',
      rangeSeparator: '~',
      startPlaceholder: '开始时间',
      endPlaceholder: '结束时间',
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
    },
  },
  {
    label: '一级部门',
    prop: 'firstDep',
    component: markRaw(Select),
    attrs: {
      options: firstList,
    },
    change: (val, formData) => {
      searchSecondList.value = secondListAll.filter((item) => item.pid === val);
      formData.secondDep = searchSecondList.value[0].value;
    },
  },
  {
    label: '二级部门',
    prop: 'secondDep',
    component: markRaw(Select),
    attrs: {
      options: searchSecondList,
    },
  },
]);
